

document.ready(function () {
    /* 获取元素 */
  let int = document.querySelectorAll('.int'); //输入框
  let delBtn = document.querySelectorAll('.del-btn')//删除按钮
  let reBoxSpan = document.querySelectorAll('.re-box span')//错误提示
  let isAgree = document.querySelector('.isAgree') //同意按钮
  let btn = document.querySelector('.btn') //注册按钮

  /*  1.当聚焦(focus)到int,给当前int添加边框线
      2.输入事件:判断当前输入值的长度-如果大于0:显示删除按钮del-btn,否则就隐藏*/
  int.forEach(function (dom, i) {
    //聚焦
    dom.addEventListener('focus', function () {
      this.style.borderColor = '#00bdff'
    })
    //输入事件
    dom.addEventListener('input', function () {
      if (this.value.length > 0) {
        delBtn[i].style.display = 'block'
      } else {
        delBtn[i].style.display = 'none'
      };
    })
  })

  /*3.需求: 点击删除按钮(delBtn),清空当前输入的数据*/
  delBtn.forEach(function (dom, i) {
    dom.addEventListener('click', function () {
      int[i].value = '';
      this.style.display = 'none'// 隐藏自己
      reBoxSpan[i].style.display = 'none'
    })
  })

  /*4.需求: 定义好正则表达式(验证规则)*/
  let reg = [
    /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/,//账号 6-12位字母开头,后面跟数字字母
    /^1[345678][0-9]{9}$/, //手机号
    /^[a-zA-Z][a-zA-Z0-9_]{3}$/,//4位字母开头,后面跟数字字母
    /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/ //密码
  ]

  /* 5.需求: 失去焦点, 验证输入信息的合法性, 如果不合法: 显示错误提示信息, 否则:就隐藏*/
  int.forEach(function (dom, i) {
    dom.addEventListener('blur', function () {
      //修改int的边框颜色
      this.style.borderColor = '#ccc'
      //let bool = 正则.test(输入的值)
      let bool = reg[i].test(this.value);
      if (bool) {
        //真:隐藏
        reBoxSpan[i].style.display = 'none'
      } else {
        //假: 显示
        reBoxSpan[i].style.display = 'block'
      }
    })
  })

  /*6.需求: 点击isAgree按钮, 将btn改变背景色, 并取消禁用*/
  isAgree.addEventListener('change', function () {
    //获取当前isAgree按钮的选中状态
    let bool = this.checked;
    if (bool) {
      btn.style.background = '#00bdff'
      btn.style.color = '#fff'
      btn.disabled = false //并取消禁用
    } else {
      btn.style.background = ''
      btn.style.color = ''
      btn.disabled = true //禁用
    }
  })

  /*7.需求: 点击立即注册,验证输入信息合法性*/
  btn.addEventListener('click', function () {
    for(let i=0; i<int.length; i++){
      let bool = reg[i].test(int[i].value);
      //判断
      if (bool) {
        reBoxSpan[i].style.display = 'none'
      } else {
        reBoxSpan[i].style.display = 'block'
        return //结束函数
      }
    }
    //完成并跳转
    location.href = './home.html'
  })























})